<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
<div class="dashboard-container" id="cars-app">
    <div class="container">
        <div class="tableBar">
            <el-input
                    v-model="input"
                    placeholder="请输入汽车名称"
                    style="width: 250px"
                    clearable
                    @keyup.enter.native="handleQuery"
            >
                <i
                        slot="prefix"
                        class="el-input__icon el-icon-search"
                        style="cursor: pointer"
                        @click="init"
                ></i>
            </el-input>
            <div class="tableLab">

                <el-button
                        type="primary"
                        @click="getAllcar"
                >
                    查看可租车辆
                </el-button>
            </div>
        </div>
        <el-table
                :data="tableData"
                stripe
                class="tableBox"
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    type="selection"
                    width="25"
            ></el-table-column>
            <el-table-column
                    prop="carName"
                    label="汽车名称"
            ></el-table-column>
            <el-table-column
                    prop="lp"
                    label="牌照"
            ></el-table-column>

            <el-table-column
                    prop="carType"
                    label="汽车类别"
            ></el-table-column>
            <el-table-column
                    prop="carPrice"
                    label="租赁价格 元/天"
            >
            </el-table-column>
            <el-table-column
                    prop="rentalStatus"
                    label="租赁状态">
                <template slot-scope="scope">
                    <span style="margin-right: 10px;">{{ scope.row.rentalStatus == '0' ? '停租' : '启租' }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="160"
                    align="center"
            >
                <template slot-scope="scope">
                    <el-button
                            :disabled="scope.row.rentalStatus=='0'"
                            type="text"
                            size="small"
                            class="blueBug"
                            @click="editHandle(scope.row)"
                    >
                        预约
                    </el-button>


                    <el-button
                            :disabled="scope.row.rentalStatus == 0"
                            type="text"
                            size="small"
                            class="blueBug"
                            @click="editHandle(scope.row)"

                    >
                        {{ scope.row.rentalStatus == '0' ? '已租' : '租车' }}
                    </el-button>
                    <el-button
                            type="text"
                            size="small"
                            class="delBut non"
                            @click="getPicture(scope.row)"
                    >
                        详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="pageList"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts"
                @size-change="handleSizeChange"
                :current-page.sync="page"
                @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
    <el-dialog
            :title="classData.title"
            :visible.sync="classData.dialogVisible"
            width="30%"
            :before-close="handleClose"
    >
        <el-form
                class="demo-form-inline"
                label-width="100px"
        >
            <el-form-item label="车辆名称：">
                <el-input
                        :disabled="true"
                        v-model="classData.carName"
                        placeholder="请输入车辆名称"
                        maxlength="14"
                />
            </el-form-item>
            <el-form-item label="车牌号：">
                <el-input   :disabled="true" v-model="classData.lp"   />
            </el-form-item>
            <el-form-item label="汽车类别：">
                <el-input   :disabled="true" v-model="classData.carType"   />
            </el-form-item>
            <el-form-item label="租赁价格：">
                <el-input   :disabled="true" v-model="classData.carPrice"  />
            </el-form-item>
            <el-form-item label="租赁状态：">
                <el-input   :disabled="true" v-model="classData.rentalStatus"   />
            </el-form-item>
            <el-form-item label="管理员编号：">
                <el-input   :disabled="true" v-model="classData.adminId"   />
            </el-form-item>
            <el-form-item label="汽车颜色：">
                <el-input   :disabled="true" v-model="classData.carColor"   />
            </el-form-item>
            <el-form-item label="员工编号：">
                <template  >
                    <el-select v-model="empId" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.empId"
                                :label="item.empId"
                                :value="item.empId">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>

            <el-form-item label="租车日期：">
                <template>
                    <div class="block">
                        <span class="demonstration"></span>
                        <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </template>
            </el-form-item>
            <el-form-item label="发车时间：">
                <el-time-select
                        v-model="value2"
                        :picker-options="{
                         start: '08:30',
                          step: '00:15',
                         end: '18:30'
  }"
                        placeholder="选择时间">
                </el-time-select>
            </el-form-item>
            <el-form-item label="还车日期：">
                <template>
                    <div class="block">
                        <span class="demonstration"></span>
                        <el-date-picker
                                v-model="value3"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </template>
            </el-form-item>


        </el-form>
        <span
                slot="footer"
                class="dialog-footer"
        >
        <el-button
                size="medium"
                @click="classData.dialogVisible = false"
        >取 消</el-button>
        <el-button
                type="primary"
                size="medium"
                @click="submitForm()"
        >确 定</el-button>
        <el-button
                v-if="action != 'edit'"
                type="primary"
                size="medium"
                class="continue"
                @click="submitForm('go')"
        > 保存并继续添加 </el-button>
      </span>
    </el-dialog>
    <el-dialog
            :title="classData.title"
            :visible.sync="classData.dialogVisible2"
            width="30%"
            :before-close="handleClose"
    >
        <el-form
                class="demo-form-inline"
                label-width="100px"
        >
            <el-form-item label="车辆图片："  class="uploadImg">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 250px; height: 250px;"></img>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/cars.js"></script>
<script>
    new Vue({
        el: '#cars-app',
        data() {
            return {
                input: '',
                counts: 0,
                page: 1,
                pageSize: 10,
                tableData : [],
                dishState : '',
                checkList: [],
                imageUrl : '',
                classData: {

                    'title': '',
                    'dialogVisible': false,
                    'dialogVisible2':false,
                    'carsId': '',
                    'name': '',
                    'carName': '',
                    'carType':'',
                    'lp': '',
                    'carPrice': '',
                    'rentalStatus':'',
                    'carId': '',
                    'adminId':'',
                    'carColor':'',
                    'url':'',
                    sort: ''
                },
                options: [],
                empId: '',
                value1: '',
                value2: '',
                value3: '',
            }
        },
        computed: {},
        created() {
            this.init()
        },
        mounted() {
        },
        methods: {
            async init () {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    name: this.input ? this.input : undefined,

                }
                await getDishPage(params).then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data || []
                        this.counts = res.total
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },

            handleQuery() {
                this.page = 1;
                this.init();
            },

            editHandle(dat){
                this.classData.title = '租车信息'
                this.action = 'edit'
                this.classData.carName = dat.carName
                this.classData.lp = dat.lp
                this.classData.carType = dat.carType
                this.classData.carPrice = dat.carPrice
                this.classData.rentalStatus = dat.rentalStatus
                this.classData.carId = dat.carId;
                this.classData.adminId = dat.adminId;
                this.classData.carColor = dat.carColor;
                this.classData.dialogVisible = true;
                this.value1 ='';
                this.value2 ='';
                this.value3 ='';
                this.searchEmployee();
            },
            getPicture(dat){
                this.classData.title = '汽车图片'
                this.imageUrl = this.getImage(dat.url)
                this.classData.dialogVisible2=true
            },
            getImage (image) {
                return `/common/download?name=${image}`
            },
            //数据提交
            submitForm(st) {
                const params = {
                    startDate: this.value1,
                    startTime:this.value2,
                    endDate:this.value3,
                    carId:this.classData.carId,
                    adminId:this.classData.adminId,
                    empId:this.empId,
                    lp:this.classData.lp
                }
                    // 检查params的每个参数是否为空
                for (let key in params) {
                    if (params[key] === null || params[key] === '') {
                        this.$message.error( key + ' 不能为空！');
                        return;
                    }
                }
                // 获取当前日期
                let currentDate = new Date();
                currentDate.setHours(0, 0, 0, 0); // 将时间设为00:00:00

                // 检查startDate和endDate是否小于当前日期
                if (new Date(params.startDate) < currentDate || new Date(params.endDate) < currentDate) {
                    this.$message.error('开始日期和结束日期不能小于当前日期！');
                    return;
                }
                axios.post("/cars/contract",params).then((res)=>{
                    if (res.data.code === 1)
                    {
                        this.classData.dialogVisible = false
                        this.$message.success('租车成功！')
                        this.init()
                    }
                }).finally(
                )
            },
            async getAllcar(){
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                }
                await getCarPage(params).then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data || []
                        this.counts = res.total
                    }
                }).catch(err => {
                    // this.$message.error('请求出错了：' + err)
                })
            },
            // 删除

            //状态更改
            searchEmployee()
            {
                axios.get("/cars/getEmployee").then((res)=>{

                        this.options = res.data.data;

                })
            },

            // 全部操作
            handleSelectionChange (val){
                let checkArr = []
                val.forEach((n) => {
                    checkArr.push(n.carId)
                })
                this.checkList = checkArr
            },
            handleSizeChange (val) {
                this.pageSize = val
                this.init()
            },
            handleCurrentChange (val) {
                this.page = val
                this.init()
            },
        }
    })
</script>
</body>
</html>